<template>
    <div class="reporting">
        <header class="header">
            <x-header class="headerContent" :left-options="{backText: ''}"><span class="title">电子发票</span><a slot="right" class="slotRight" @click="record">发票记录</a></x-header>
        </header>
        <main class="main">
            <div class="top">
                <div class="topTitle">
                    <p class="text">您所开具的是2018年度取暖费{{amount}}元整</p>
                </div>
                <div class="btn">
                    <button-tab>
                        <button-tab-item class="ele" selected @on-item-click="goDetail('electronics')">电子发票</button-tab-item>
                        <button-tab-item class="ele" @on-item-click="goDetail('page')">纸质发票</button-tab-item>
                    </button-tab>
                </div>
            </div>
            <router-view></router-view>
        </main>
    </div>
</template>
<script>
import { XHeader, ButtonTab, ButtonTabItem, Actionsheet } from 'vux'
import bus from '../../config/bus.js'
export default {
    name: 'Reporting',
    data () {
        return {
            resData: null,
            amount: ''
        }
    },
    components: {
        XHeader,
        ButtonTab, 
        ButtonTabItem, 
        Actionsheet
    },
    created () {
        this.amount = sessionStorage.getItem("money");
    },
    methods: {
        goDetail (item) {
            switch(item) {
                case 'electronics':
                    this.$router.push({ path: '/Home/Reporting/Electronics' })
                    bus.$emit('type', '电子发票')
                break;
                case 'page':
                    this.$router.push({ path: '/Home/Reporting/Page' })
                    bus.$emit('type', '纸质发票')
                break;
            }
        },
        record () {
            this.$router.push({
                path: '/Home/Record'
            })
        },
        listenToMyBoy (res) {
            this.resData = res
        }
    }
}
</script>
<style scoped lang="less">
.reporting{
    width: 100%;
    height: 100%;
    background: rgba(250,250,250,1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.header{
    width: 100%;
}
.title{
    font-size: 16px;
    font-family:ArialMT;
    color:rgba(255,255,255,1);
    line-height:18px;
    letter-spacing:1px;
}
.headerContent{
    width: 100%;
    background:linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.main{
    width: 100%;
    flex: 1;
}
.top{
    width: 100%;
    height: 2rem;
    background: rgba(250,250,250,1);
    margin-top: .4rem;
    .topTitle{
        width: 100%;
        height: .533333rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .text{
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(249,152,23,1);
            line-height:20px;
            letter-spacing:1px;
        }
    }
    .btn{
        width: 100%;
        height: .906667rem;
        padding: 0rem 1.333333rem;
        margin-top: .266667rem;
        // border: 1px solid red;
    }
}



// .text{
//     font-size: 0.13rem;
//     font-weight: 400;
//     color:rgba(151,151,151,1);
// }
.content{
    width: 100%;
}

.slotRight{
    color: #fff !important;
    margin-top: .266667rem;
    font-size:12px;
    font-family:ArialMT;
    line-height:14px;
    letter-spacing:1px;
}
</style>
